<template>
   <div class="be-partner">
       <div class="title">
           <p class="title1">成为合作伙伴</p>
           <p class="title2">BECOME THE PARTNERS</p>
           <p class="title3">基于金色摇篮-原材料供应链平台，建立企业专门服务体系，为供需两方打造战疫平台的同时，也为以后供应链优化打下坚实基础，成本直降，开拓市场</p>
       </div>
       <div class="partner partner1">
           <div class="text">
               <div class="p1">涂料厂商</div>
               <div class="p2">通过金色摇篮解决问题，实现最优供应链，成本直降</div>
               <div class="p3">平台能力:匹配平台 |  优化平台 | 资源平台 服务监督平台</div>
           </div>
           <div class="button1">立即加入</div>
           <div class="button2">咨询客服</div>
       </div>
       <div class="partner partner2">
           <div class="text">
               <div class="p1">原材料商</div>
               <div class="p2">通过金色摇篮解决问题，实现最优供应链，成本直降</div>
               <div class="p3">平台能力:匹配平台 |  优化平台 | 资源平台 服务监督平台</div>
           </div>
           <div class="button1">立即加入</div>
           <div class="button2">咨询客服</div>
       </div>
       <div class="material-manufactureer">
           <img src="@/assets/image/supply/manufacturer.jpg" alt="">
           <div class="detail">
                <p class="p1">原料厂商销售、贸易商转型解决方案</p>
                <p class="p2">实行原材料贸易商、原材料品牌商双向征集，以平台为中枢，重构渠道合作模式，实现原材料品牌商稳定、快速销货，同时消化库存，实现跨域</p>
                <p class="p3">解决方案特点</p>
                <p class="p4">快速销货,消化库存  |  高效转型，盈利渠道  |  集成分发，背书担保</p>
                 <div class="button1">立即加入</div>
           <div class="button2">咨询客服</div>
           </div>
       </div>
   </div>
</template>

<script>
export default {
   name: 'BePartner',
   data() {
       return {}
   },
  components: {}
}
</script>

<style scoped lang="less">
.be-partner{
    width: 100%;
    height: 18.5rem;
    
    .title{
        width: 100%;
        height: 3.05rem;
        position: relative;
        text-align: center;
        .title1{
            font-size: 0.4rem;
            position: absolute;
            top: 0.9rem;
            left: 50%;
            transform: translateX(-50%);
            
        }
        .title2{
            font-size: 0.24rem;
            transform: scale(5/6);
            position: absolute;
            top: 1.37rem;
            left: 50%;
            transform: translateX(-50%);

        }
        .title3{
            font-size: 0.2rem;
            transform: scale(5/6);
            position: absolute;
            width: 100%;
            top: 2rem;
            left: 50%;
            transform: translateX(-50%);

        }
    }
    .partner{
        width: 7rem;
        height: 1.9rem;
        border: 0.01rem solid #eaeaea  ;
        margin: 0 auto;
        position: relative;
        .text{
            width: 5.1rem;
            height: 100%;
            position: relative;
            .p1{
                font-size: 0.26rem;
                color: #333333;
                position: absolute;
                top: 0.4rem;
                left: 0.26rem;

            }
            .p2{
                font-size: 0.24rem;
                transform: scale(5/6);
                transform-origin: 0 0;
                color: #333333;
                white-space:nowrap;
                width: 5.1rem;
                position: absolute;
                top: 0.87rem;
                left: 0.26rem;
                
            }
            .p3{
                font-size: 0.24rem;
                transform: scale(5/6);
                transform-origin: 0 0;
                white-space:nowrap;
                color: #777777;
                 position: absolute;
                top: 1.28rem;
                left: 0.26rem;
            }
        }
        .button1{
            width: 1.7rem;
            height: 0.65rem;
            background: #d4aa58;
            color: #fff;
            font-size: 0.24rem;
            text-align: center;
            line-height: 0.65rem;
            position: absolute;
            top: 0.24rem;
            right: 0.15rem;
        }
        .button2{
            background: #ffffff;
            color: #777777;
            width: 1.7rem;
            height: 0.65rem;
            font-size: 0.24rem;
            text-align: center;
            line-height: 0.65rem;
            border: 0.01rem solid #dbdbdb;
             position: absolute;
            bottom: 0.28rem;
            right: 0.15rem;

        }

    }
    .partner1{
         margin-top: 0.5rem;
    }
    .partner2{
        margin-top: 0.2rem;
    }
    .material-manufactureer{
       width: 7rem;
       height: 11.5rem;
       margin: 0 auto;
       margin-top: 0.1rem;
       border: 0.01rem solid  #dbdbdb;
       position: relative;
        img{
            position: absolute;
            top: 0;
            left: 50%;
            transform:translateX(-50%);
            width: 6.48rem;
            height: 6.48rem;
        }
        .detail{
            width: 6.48rem;
            height: 4.3rem;
            position: absolute;
            top: 6.48rem;
            left: 50%;
            transform:translateX(-50%);
             
    
             .p1{
                 position: absolute;
                 top: 0.4rem;
            font-size: 0.27rem;
            color: #333333;
        }
        .p2{
            font-size: 0.24rem;
            transform: scale(5/6);
            transform-origin: 0 0;
            color: #5c5c5c;
            position: absolute;
            top: 0.95rem;
        }
        .p3{
            font-size: 0.27rem;
            color: #4e4e4e;
            position: absolute;
            top: 2.54rem;
        }
        .p4{
             font-size: 0.24rem;
             color: #b6b6b6;
             transform: scale(5/6);
             transform-origin: 0 0;
             position: absolute;
             top: 3.03rem;
             white-space:nowrap;
        }
        }
        .button1{
            width: 1.7rem;
            height: 0.65rem;
            background: #d4aa58;
            color: #fff;
            font-size: 0.24rem;
            text-align: center;
            line-height: 0.65rem;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .button2{
            background: #ffffff;
            color: #777777;
            width: 1.7rem;
            height: 0.65rem;
            font-size: 0.24rem;
            text-align: center;
            line-height: 0.65rem;
            border: 0.01rem solid #dbdbdb;
             position: absolute;
            bottom: 0rem;
            left: 2.0rem;

        }
       

     }

}

</style>
